<template>
	<view>
		<!-- <up-sticky offset-top="0" custom-nav-height="0">

		</up-sticky> -->
		<!-- <w-search></w-search> -->
		<!-- 头部工种选择区域 -->
		<HeaderSection 
			:loading="loading" 
			:userinfo="userinfo" 
			:opcData="opcData"
			@show-opc-selector="showOpcSelector"
			@go-to-login="goToLogin"
		/>
		
		<view class="centre">
			<view class="index-box">
				<view class="banner">
					<uni-swiper-dot class="uni-swiper-dot-box" mode="round" field="content">
						<swiper class="swiper-box">
							<swiper-item v-for="(item, index) in banner" :key="index">
								<view class="swiper-item">
									<image class="banner-img" :src="item.picUrl" mode="aspectFill">
									</image>
								</view>
							</swiper-item>
						</swiper>
					</uni-swiper-dot>
				</view>
				<view class="practice">
					<view class="practice-block"
						@click="navigateTo(`/pages/question/sequence?opc=${opcData.opc}&type=1&opcname=${opcData.opcname}`)">
						<text class="title" style="color: #fff;padding-top: 15rpx;">顺序练习</text>
						<text class="describe" style="color: rgba(255, 255, 255, 0.7);">巩固练习，强化记忆</text>
						<view class="bottom">
							<view class="text">立即练习</view>
							<view class="bottom-img">
								<image style="width: 126rpx;height: 112rpx;" src="https://img.qiananquang.com/minapp/icon10.png" mode="">
								</image>
							</view>
						</view>
					</view>
					<view class="practice-block practice-block-2">
						<view :render-link="false" class="block-2-box"
							@click="navigateTo(`/pages/question/exam?opc=${opcData.opc}&type=2&opcname=${opcData.opcname}`)">
							<text class="title" style="color: #fff;padding-top: 15rpx;">模拟考试</text>
							<text class="describe" style="color: rgba(255, 255, 255, 0.7);">模拟真题，提高分数</text>
							<view class="bottom">
								<view class="text" style="color: #449FE5;">立即模拟</view>
								<view class="bottom-img" style="">
									<image style="width: 115rpx;height: 120rpx;" src="https://img.qiananquang.com/minapp/icon11.png" mode="">
									</image>
								</view>
							</view>
						</view>
					</view>
				</view>
			
				<!-- <view :render-link="false" class="block-2-box"
							@click="navigateTo(`/pages/question/questionList?opc=${opcData.opc}&type=6`)"
							style="background: #FFE0DD;">
							<view class="title">
								<text class="title" style="color: #805550FF;">易错题</text>
								<text class="describe print" style="color: #805550FF;">更轻松</text>
							</view>
							<view>
								<image style="width: 73rpx;height: 83rpx;"
									src="https://img.qiananquang.com/minapp/icon9.png" mode="">
								</image>
							</view>
						</view> -->
				<view class="nav-list">
					<view class="list-box-item" :render-link="false" @click="navigateTo(`/pages/question/paperList?type=0&opc=${opcData.opc}`)">
						<view class="list-box-item-text">
							<text style="font-size: 30rpx; margin-bottom: 10rpx;">考试记录</text>
							<text>查看模拟成绩，提高分数</text>
						</view>
						<view class="list-icon"
							style="background: linear-gradient(0deg,  #bbecd5,#66d2a0);box-shadow: 0rpx 3rpx 9rpx 0rpx #bbecd5;">
							<image style="width: 40rpx;height: 40rpx;" src="https://img.qiananquang.com/minapp/icon12.png" mode="">
							</image>
						</view>
					</view>
					<view class="list-box-item" :render-link="false" @click="navigateTo(`/pages/question/questionList?opc=${opcData.opc}&type=3`)">
						<view class="list-box-item-text">
							<text style="font-size: 30rpx; margin-bottom: 10rpx;">错题记录</text>
							<text>复习记录，提高分数</text>
						</view>
						<view class="list-icon"
							style="background: linear-gradient(0deg, #FB5051, #FB6969);box-shadow: 0rpx 3rpx 9rpx 0rpx rgba(251,82,83,0.4);">
							<image style="width: 40rpx;height: 40rpx;" src="https://img.qiananquang.com/minapp/icon8.png" mode="">
							</image>
						</view>
					</view>
					<view class="list-box-item" :render-link="false" @click="navigateTo(`/pages/question/questionList?opc=${opcData.opc}&type=4`)">
						<view class="list-box-item-text">
							<text style="font-size: 30rpx; margin-bottom: 10rpx;">题目收藏</text>
							<text>重点关注题目</text>
						</view>
						<view class="list-icon"
							style="background: linear-gradient(0deg, #FEA704, #FEC603);box-shadow: 0rpx 3rpx 9rpx 0rpx rgba(254,169,4,0.4);">
							<image style="width: 40rpx;height: 40rpx;" src="https://img.qiananquang.com/minapp/icon1.png" mode="">
							</image>
						</view>
					</view>
					<view class="list-box-item" :render-link="false" @click="navigateTo(`/pages/question/questionList?opc=${opcData.opc}&type=6`)">
						<view class="list-box-item-text">
							<text style="font-size: 30rpx; margin-bottom: 10rpx;">易错题</text>
							<text>精选高频易错题</text>
						</view>
						<view class="list-icon"
							style="background: linear-gradient(0deg, #63D2A0, #66D39C);box-shadow: 0rpx 3rpx 9rpx 0rpx #63D2A0;">
							<image style="width: 40rpx;height: 40rpx;" src="https://img.qiananquang.com/minapp/icon3.png" mode="">
							</image>
						</view>
					</view>

					<!-- <view class="list-box">
						<navigator :render-link="false" class="list-box-link" url="">
							<view class="list-icon"
								style="background: linear-gradient(0deg, #03AAF7, #04C6FB);box-shadow: 0rpx 3rpx 9rpx 0rpx rgba(3,171,245,0.4);">
								<image style="width: 64rpx;height: 64rpx;" src="https://img.qiananquang.com/minapp/icon6.png" mode="">
								</image>
							</view>
							<text>图标大全</text>
						</navigator>
					</view>
					<view class="list-box">
						<view :render-link="false" class="list-box-link" @click="navigateTo('')">
							<view class="list-icon"
								style="background: linear-gradient(0deg,  #4440F3, #5852EF);box-shadow: 0rpx 3rpx 9rpx 0rpx rgba(88,82,238,0.4);">
								<image style="width: 64rpx;height: 64rpx;" src="https://img.qiananquang.com/minapp/icon8.png" mode="">
								</image>
							</view>
							<text>易错题</text>
						</view>
					</view> -->
				</view>
					<!-- 统计栏开始 -->
				<!-- <view class="practice-statistics">
					<view class="stat-item">
						<view class="stat-icon"><view class="iconfont icon-zuigaofen3"></view></view>
						<text class="stat-label">最高分</text>
						<up-count-to :endVal="maxScore" :duration="1200" color="#4D82F3" fontSize="36" bold class="stat-value" />
					</view>
					<view class="stat-item">
						<view class="stat-icon"><view class="iconfont icon-zuidifen2"></view></view>
						<text class="stat-label">最低分</text>
						<up-count-to :endVal="minScore" :duration="1200" color="#51C5F5" fontSize="36" bold class="stat-value" />
					</view>
					<view class="stat-item">
						<view class="stat-icon"><view class="iconfont icon-jilu"></view></view>
						<text class="stat-label">模拟次数</text>
						<up-count-to :endVal="mockCount" :duration="1200" color="#FEC603" fontSize="36" bold class="stat-value" />
					</view>
				</view> -->
				<!-- 统计栏结束 -->

				<!-- <view style="margin: 30rpx;" @click="navigateTo(`/pages/question/paperList?type=0&opc=${opcData.opc}`)"
					class="btn-red exam-btn">
					<view class="exam-btn-txt">
						<text class="title">理论考试记录</text>
						<text class="look">去查看你所有的考试记录</text>
					</view>
					<view class="exam-btn-btn">去查看</view>
				</view>
				<view class="my">
					<view class="my-item">
						<view class="my-item-txt"
							@click="navigateTo(`/pages/question/questionList?opc=${opcData.opc}&type=3`)">
							<text class="title">我的错题</text>
							<text class="num">提高分数必看</text>
						</view>
						<view class="iconfont icon-cuowu2"></view>
					</view>
					<view class="my-item">
						<view class="my-item-txt"
							@click="navigateTo(`/pages/question/questionList?opc=${opcData.opc}&type=4`)">
							<text class="title">我的收藏</text>
							<text class="num">重点关注题目</text>
						</view>
						<view class="iconfont icon-shoucang"></view>
					</view>
				</view> -->
				<!-- <view url="/pages/skill/skill" class="centre-block-1">
					<view class="top-box">
						<text class="title">科目一·答题思路精讲</text>
						<view class="hot">
							<image src="https://img.qiananquang.com/minapp/houmiao.png" mode=""></image>
							<text>1.3万人正在看</text>
						</view>
					</view>
					<view class="bottom-box">
						<view class="left-video-box">
							<view class="iconfont icon-bofang"></view>
							<image style="width: 100%;height: 100%;" src="/static/img/banner3.jpg" mode="">
							</image>
						</view>
						<view class="right-text">
							<text>易考题 扣分题 易错题 超速题 标志题</text>
							<view class="btn">
								看视频
							</view>
						</view>
					</view>
				</view>
				<view class="ad-2">
					<image src="../../static/img/banner3.jpg" mode=""></image>
				</view>
				<view class="ad-2">
					<image src="../../static/img/banner3.jpg" mode=""></image>
				</view> -->
			</view>
		</view>
		<guideStep v-if="stepShow" :step="step"></guideStep>
		<up-modal :show="showModal" :title="this.opcData.opcname" :closeOnClickOverlay="false"
			content='您还没报名该工种，请先报名，否则练习题数量受限' :showCancelButton="true" confirmText="去报名" cancelText="已知晓"
			@cancel="modalCancel" @confirm="modalConfirm"></up-modal>

	</view>

</template>

<script>
import { getTopicList } from '@/http/question.js'
import { getBannerList, getDetail } from '@/http/user.js'
import guideStep from "@/components/xky-guideStep/xky-guideStep.vue";
import HeaderSection from "@/components/header-section/header-section.vue";

export default {
	components: {
		// CourseTypeSelector,
		guideStep,
		HeaderSection
	},
	data() {
		return {
			stepShow: false,
			step: {
				name: 'index-guide',
				repeat: true,
				guideList: [
					{
						el: '.opc-switch',
						tips: '多工种切换',
						style: "border-radius: 8rpx;margin: 0",
						next: "完成"
					}
				]
			},
			opcData: {
				opc: '',
				opcname: ''
			},
			title: 'Hello',
			current: 1,
			index: 0,
			h_box: 'auto',
			menuButtonH: '',
			round: {

			},
			userinfo: {
				courses: []
			},
			banner: [],
			maxScore: 98,
			minScore: 60,
			mockCount: 12,
			loading: true,
			showModal:false,
			token:''
		}
	},
	onLoad() {
		this.getBannerList()
		// this.config = uni.getStorageSync('config')[0] || {}
		// let banner = uni.getStorageSync('banner') || []
		// this.banner = banner.filter(item => item.tabItem == 'index')

	},
	async onShow() {
		// 判断是否TOKEN
		this.loading = true
		this.token = uni.getStorageSync('token')
		if(!this.token){
			this.loading = false
			return
		}
		this.userinfo = await this.loadUserinfo()
		this.opcData = uni.getStorageSync('opcData') || {}
		
		// 检查用户课程数据
		if (this.userinfo.courses?.length > 0) {
			// 只有一个课程时自动选择
			if (this.userinfo.courses.length === 1) {
				const course = this.userinfo.courses[0];
				this.opcData = {
					courseId: course.id,
					opc: course.opc,
					opcname: course.title,
					type: course.type
				}
				uni.setStorageSync('opcData', this.opcData)
			}
			// 有多个课程且未选择时弹出选择框
			else if (this.userinfo.courses.length > 1 && (!this.opcData?.opc)) {
				this.$nextTick(() => {
					this.showOpcSelector()
				})
			}
			
		}
		this.loading = false

	},
	methods: {

		async loadUserinfo() {
			try {
				const res = await getDetail();
				if (res && res.data) {
					// 确保返回的数据有courses属性
					return {
						...res.data,
						courses: res.data.courses || []
					};
				} else {
					console.warn('loadUserinfo: No user data received or res.data is missing.');
					return { courses: [] }; // 如果没有数据或res.data未定义，返回包含空courses数组的对象
				}
			} catch (error) {
				console.error('Error in loadUserinfo:', error);
				return { courses: [] }; // 发生错误时返回包含空courses数组的对象
			}
		},
		getBannerList() {
			getBannerList().then(res => {
				this.banner = res.data.filter(item => item.tabItem == 'index')
			})
		},
		opcClick(item) {
			// 处理course对象，转换为opcData格式
			if (item.id) {
				// 如果是course对象
				this.opcData = {
					courseId: item.id,
					opc: item.opc,
					opcname: item.title,
					type: item.type
				}
			} else {
				// 如果是直接的opcData对象
				this.opcData = item
			}
			uni.setStorageSync('opcData', this.opcData)
			uni.showToast({
				title: `已切换到${this.opcData.opcname}`,
				icon: 'success'
			})
		},
		// 辅助函数，用于查询DOM元素的高度并设置到Vue实例的属性上  
		async queryAndSetHeight(selector, propName) {
			try {
				const query = uni.createSelectorQuery().in(this);
				const res = await new Promise((resolve, reject) => {
					query.select(selector)
						.boundingClientRect(rect => {
							if (rect) {
								resolve(Math.round(rect.height) + 'px');
							} else {
								reject(new Error('无法获取DOM元素的高度'));
							}
						}).exec();
				});
				this[propName] = res;
			} catch (error) {
				console.error(`获取${selector}的高度时出错:`, error);
			}
		},


		// 组件加载或更新后查询DOM元素的高度  
		async fetchDomHeights() {
			// 定义一个映射对象，将索引映射到对应的DOM选择器  
			const domSelectors = {
				indexBox: this.index === 0 ? '.index-box' : '.index-box1',
				subjectNav: this.subject_nav_index === 0 ? '.subject1' : this.subject_nav_index === 1 ?
					'.subject2' : this.subject_nav_index === 2 ? '.subject3' : '.subject4'
			};

			// 在$nextTick中确保DOM更新后再进行查询  
			await this.$nextTick();

			// 查询并设置高度  
			await this.queryAndSetHeight(domSelectors.indexBox, 'h_box');
			await this.queryAndSetHeight(domSelectors.subjectNav, 'h_subject_box');
		},


		bannerClick() {

		},
		change(e) {
			this.index = e.detail.current;
			let dom = this.index == 0 ? '.index-box' : '.index-box1'
			this.queryAndSetHeight(dom)
		},
		menuClick(e, i) {
			this.h_box = 'auto'
			this.index = i
			this.current = e.target.dataset.current;
			// this.fetchDomHeights();
			// if()
			// 
		},
		checkOpc() {

			if (!this.opcData.opc) {
				uni.showToast({
					title: '请先选择工种',
					icon: 'none'
				})
				return false
			}
			return true
		},
		modalCancel() {
			this.showModal = false
			uni.setStorageSync('opcData', this.opcData)
		},
		modalConfirm() {
			uni.switchTab({ url: '/pages/courses/courses' })
		},
		// 显示工种选择器
		showOpcSelector() {
			if (!this.userinfo.courses || this.userinfo.courses.length === 0) {
				uni.showModal({
					title: '提示',
					content: '请登录后，在进行练习',
					confirmText: '去登录',
					cancelText: '先看看',
					confirmColor: '$uni-color-primary',
					success: (e) => {
						if (e.confirm) {
							uni.navigateTo({ url: '/pages/login/login' })
						}
					}
				})
				return
			}
			
			// 如果只有一个工种，直接选择
			if (this.userinfo.courses.length === 1) {
				const course = this.userinfo.courses[0]
				this.opcClick(course)
				return
			}
			
			// 显示工种选择弹窗
			uni.showActionSheet({
				itemList: this.userinfo.courses.map(course => course.title),
				success: (res) => {
					const selectedCourse = this.userinfo.courses[res.tapIndex]
					this.opcClick(selectedCourse)
				}
			})
		},
		// 跳转到登录页面
		goToLogin() {
			uni.navigateTo({ url: '/pages/login/login' })
		},
		// 修改导航方法
		navigateTo(url) {
			// console.log(url);
			// return
			let token = uni.getStorageSync('token')
			if (!token || !this.userinfo.courses || this.userinfo.courses.length <= 0) {
				return uni.showModal({
					title: '提示',
					content: '请登录后才能进行练习',
					confirmText: '去登录',
					cancelText: '先看看',
					confirmColor: '$uni-color-primary',
					success: (e) => {
						if (e.confirm) {
							uni.navigateTo({ url: '/pages/login/login' })
						}
					}
				})
			}
			if (!this.checkOpc()) {
				return this.showOpcSelector()
			}
			uni.navigateTo({ url })
		}
	},
	onShareAppMessage() {
		return {
			title: '考前练一练，考试轻松过',
			path: '/pages/index/index'
		}
	},
	onShareTimeline() {
		return {
			title: '考前练一练，考试轻松过',
			path: '/pages/index/index',
			imageUrl: 'https://img.qiananquang.com/app/images/2025-01-11/a5d68acc-f495-4f6a-8410-5bb1ffc8426c.png'
		}
	}
}
</script>

<style lang="scss">
page {
	background: linear-gradient(180deg, #B4CDF8, #F4F6FA);
}



.index-box {
	margin: 0 35rpx;
}

.centre {
	position: relative;
	// background: linear-gradient(180deg, #B4CDF8, #F4F6FA);
	padding-top: 20rpx;
	border-radius: 46rpx 46rpx 0rpx 0rpx;

	.banner {
		height: 160rpx;

		.swiper-box {
			height: 160rpx;
		}

		.swiper-item {
			height: 160rpx;
			border-radius: 10rpx;
			overflow: hidden;
		}

		.banner-img {
			width: 100%;
			height: 100%;
		}

	}
}

.practice {
	margin: 30rpx 0;
	display: flex;
	gap: 20rpx; // 新增

	.title {
		display: block;
		font-weight: bold;
		font-size: 32rpx;
		line-height: 48rpx;
	}

	.describe {
		display: block;
		font-weight: 500;
		font-size: 20rpx;
		line-height: 48rpx;
	}

	.practice-block {
		background: linear-gradient(180deg, #4D82F3 0%, #B5C9F7 100%);
		box-shadow: 0rpx 3rpx 18rpx 0rpx rgba(44, 76, 84, 0.2);
		border-radius: 10rpx;
		padding: 25rpx;
		flex: 1;
		height: 246rpx;

		.bottom {
			display: flex;
			padding-top: 20rpx;
			justify-content: space-between;

			.text {
				width: 150rpx;
				height: 69rpx;
				background: #FFFFFF;
				border-radius: 34rpx;
				font-weight: bold;
				font-size: 24rpx;
				color: #4460E5;
				line-height: 69rpx;
				text-align: center;
				align-self: center;
				// margin-right: 35rpx;
			}
		}

		.bottom-img {
			opacity: 0.8;
		}
	}

	.practice-block-2 {
		background: linear-gradient(180deg, #51C5F5 0%, #DFF4FD 100%);
	}

	// .block-2 {
	// 	background: linear-gradient(180deg, #51C5F5 0%, #DFF4FD 100%);
	// 	box-shadow: 0rpx 3rpx 18rpx 0rpx rgba(44, 76, 84, 0.2);
	// 	border-radius: 10rpx;
	// 	padding: 30rpx;
	// 	flex: 1;
	// 	height: 246rpx;
	// 	.bottom {
	// 		display: flex;
	// 		padding-top: 20rpx;

	// 		.text {
	// 			width: 150rpx;
	// 			height: 69rpx;
	// 			background: #FFFFFF;
	// 			border-radius: 34rpx;
	// 			font-weight: bold;
	// 			font-size: 24rpx;
	// 			color: #4460E5;
	// 			line-height: 69rpx;
	// 			text-align: center;
	// 			align-self: center;
	// 			margin-right: 35rpx;
	// 		}
	// 	}
	// }
}

.practice-statistics {
	display: flex;
	justify-content: space-between;
	align-items: stretch;
	margin: 30rpx 0 0 0;
	gap: 20rpx;
	background: none;
	box-shadow: none;
	padding: 0;
}

.stat-item {
	flex: 1;
	background: #fff;
	border-radius: 18rpx;
	box-shadow: 0 4rpx 18rpx 0 rgba(44,76,84,0.10);
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 28rpx 0 22rpx 0;
	transition: box-shadow 0.2s;
}

.stat-item:active {
	box-shadow: 0 2rpx 8rpx 0 rgba(44,76,84,0.06);
}

.stat-label {
	font-size: 22rpx;
	color: #888;
	margin-bottom: 10rpx;
	letter-spacing: 2rpx;
}

.stat-value {
	font-size: 38rpx;
	font-weight: bold;
	margin-top: 2rpx;
}

.stat-icon {
  margin-bottom: 8rpx;
  .iconfont {
    font-size: 48rpx;
    color: #4D82F3;
    &.icon-zuidifen2 { color: #51C5F5; }
    &.icon-jilu { color: #FEC603; }
  }
}


.centre-block-1 {
	margin: 0 30rpx 30rpx 30rpx;
	background: #FFE7E4;
	border-radius: 10rpx;
	display: flex;
	flex-direction: column;
	padding: 30rpx;

	.top-box {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 20rpx;

		.title {
			font-weight: 600;
			font-size: 32rpx;
			color: #4B2E2B;
			line-height: 48rpx;
		}

		.hot {
			background: #FF9E4D;
			position: relative;
			width: 190rpx;
			border-radius: 10rpx;

			image {
				position: absolute;
				left: -16rpx;
				top: -8rpx;
				width: 34rpx;
				height: 50rpx;
				// color: linear-gradient(0deg,  #4440F3, #5852EF);
			}

			text {
				font-weight: 600;
				font-size: 22rpx;
				color: #FFFFFF;
				line-height: 35rpx;
				padding-left: 20rpx;
			}
		}

	}

	.bottom-box {
		display: flex;

		.left-video-box {
			width: 360rpx;
			height: 202rpx;
			position: relative;

			.iconfont {
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
				font-size: 60rpx;
			}
		}

		.right-text {
			flex: 1;
			margin-left: 49rpx;

			text {
				font-weight: 400;
				font-size: 28rpx;
				color: #4B2E2B;
				line-height: 41rpx;
			}

			.btn {
				margin-top: 20rpx;
				background: #FD6144;
				border-radius: 33rpx;
				width: 197rpx;
				height: 66rpx;
				font-weight: 600;
				font-size: 28rpx;
				color: #FFFFFF;
				line-height: 66rpx;
				text-align: center;
			}
		}
	}
}


.nav-list {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	margin-bottom: 30rpx;
	// background: linear-gradient(180deg, #FFEFE6 0%, #FDFDFB 100%);


	.list-box-item {
		padding: 20rpx 10rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		background: #e3e3e375;
		box-shadow: 0rpx 4rpx 14rpx 0rpx #E1E7F3;
		margin: 10rpx;
		border-radius: 10rpx;

		.list-icon {
			width: 60rpx;
			height: 60rpx;
			border-radius: 20rpx;
			display: flex;
			justify-content: center;
			align-items: center;

			.iconfont {
				font-size: 64rpx;
				color: #060809;
			}
		}

		.list-box-item-text {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: baseline;
		}

		text {
			font-size: 24rpx;
			color: #333333;
		}
	}
}

.my {
	display: flex;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-column-gap: 25rpx;
	margin: 0 30rpx;

	.my-item {
		background: $uni-gradient-primary;
		box-shadow: 3rpx 3rpx 8rpx 0rpx rgba(230, 230, 230, 0.27);
		border-radius: 10rpx;
		display: flex;
		align-items: center;
		justify-content: space-around;
		height: 142rpx;

		text {
			display: block;
			text-align: left;
		}

		.title {
			font-weight: 700;
			font-size: 32rpx;
			color: #101010;
			margin-bottom: 10rpx;
		}

		.num {
			font-weight: 500;
			font-size: 26rpx;
			color: #979898;
		}

		.icon-shoucang {
			background: $uni-gradient-primary;
			box-shadow: 0px 6rpx 18rpx 0px rgba(254, 169, 4, 0.4);

		}

		.icon-cuowu2 {
			background: $uni-gradient-primary;
			box-shadow: 0px 6rpx 18rpx 0px rgba(251, 82, 83, 0.4);
		}

		.iconfont {
			border-radius: 20rpx;
			height: 100rpx;
			width: 100rpx;
			line-height: 100rpx;
			text-align: center;
			font-size: 56rpx;
			color: #fff;
		}
	}
}

.exam-btn {
	background: $uni-gradient-primary;
}

.exam-btn-btn {
	background: $uni-color-primary;
	color: #fff;
}
</style>